<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />
    <title>Services - Botany Template</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <!--
    Botany Template
    http://www.templatemo.com/preview/templatemo_391_botany
    -->
    <link href="../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../static/css/templatemo_style.css" rel="stylesheet" type="text/css">

    <!-- HTML 5 shim for IE backwards compatibility -->
        <!-- [if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
        </script>
        <![endif]-->
    <!--
    Credits
    Equal Height Columns - http://www.hongkiat.com/blog/css-equal-height/
    Font Awesome by Dave Gandy - http://fontawesome.io
    -->
    <style>
        label {
            color: white;
        }
    </style>
</head>
<body class="templatemo_flower_1">
    <div id="main_container">
        <div class="container" id="services">
            <div class="row col-wrap">
                <div id="left_container" class="col col-md-3 col-sm-12">
                    <div class="templatemo_logo">
                        <a href="#"><img src="../static/images/templatemo_logo.png" alt="Botany Theme"></a>
                    </div>
                    <nav id="main_nav">
                        <ul class="nav">
                            <li><a href="index.html">首页</a></li>
                            <li><a href="about.html">数据收集</a></li>
                            <li><a href="services.html">每月pm2.5&pm10分析</a></li>
                            <li class="active"><a href="portfolio.html">每月平均so2&no2分析</a></li>
                            <li><a href="contact.html">全年空气质量等级分析</a></li>
                        </ul>
                    </nav> <!-- nav -->
                    <div>
                        <a href="#"><img src="../static/images/facebook.png" alt="Like us on Facebook"></a>
                        <a href="#"><img src="../static/images/twitter.png" alt="Follow us on Twitter"></a>
                        <a href="#"><img src="../static/images/rss.png" alt="RSS feeds"></a>
                    </div>
                </div>
                <div id="right_container" class="col col-md-9 col-sm-12">
                    <div class="row">
                        <div class="col col-md-12">
                            <h2>数据分析图表</h2>
                        </div>
                    </div>
                    <div>
                            <p style="font-size: 15px;">·SO2和NO2是大气中的主要污染物，它们的来源各不相同。SO2主要来自于燃煤和工业排放，而NO2主要来自于交通尾气和工业排放。通过分析它们之间的相关性，可以帮助识别不同的污染源对空气质量的贡献程度，从而指导环境管理部门采取针对性的减排措施。</p>
                            <p style="font-size: 15px;">·SO2和NO2是常见的大气污染物，它们对环境质量和人体健康都有重要影响。通过分析它们之间的相关性，可以更好地评估大气污染的状况和趋势，为环境质量评估提供重要参考。</p>
                            <p style="font-size: 15px;">·SO2和NO2都是对人体健康有害的大气污染物，它们与呼吸系统疾病、心血管疾病等健康问题密切相关。通过分析它们之间的相关性，可以更好地评估不同污染物之间的协同效应，为制定健康保护政策提供科学依据。</p>
                            <p style="font-size: 15px;">·如果SO2和NO2之间存在较高的相关性，可能意味着它们受到相似的污染源影响。在环境监测网络中，可以根据它们之间的相关性调整监测点的布局，以更好地反映实际的污染状况，提高监测数据的准确性和可靠性。</p>
                    </div>
                    <div>
                        <form action="/portfolio.html" method="post">
                            <label for="city">选择城市：</label>
                            <select name="city" id="city">
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                            </select>
                            <label for="year">选择年份：</label>
                            <select name="year" id="year">
                                <option value="2020">2020</option>
                                <option value="2021">2021</option>
                            </select>
                            <button type="submit">生成图表</button>
                        </form>
                    </div>
                    {{ myechart|safe }}
                    <div>
                        <p style="font-size: 20px;">SO2和NO2的相关系数为: {{ correlation_coefficient }}</p>
                    </div>
                    <div>
                        <img src="../static/images/{{ city }}{{ year }}_heatmap.png" alt="so2和no2相关性热力图">
                    </div>
                </div>
            </div>
            <footer class="row credit">
                <div class="col col-md-12">
                    <div id="templatemo_footer">
                        Copyright © 2084 <a href="#">Company Name</a>
                    </div>
                </div>
            </footer>
        </div>
    </div>
    <!-- templatemo 391 botany -->
</body>
</html>
